<template>
  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-6">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-4xl overflow-hidden">
      <!-- 标题 -->
      <h1 class="text-3xl font-bold text-center text-blue-600 py-8">课设毕设生成工具</h1>

      <!-- 选项卡 -->
      <div class="border-b">
        <div class="flex px-6">
          <button
            v-for="tab in tabs"
            :key="tab.id"
            @click="activeTab = tab.id"
            class="py-3 px-6 relative"
            :class="activeTab === tab.id ? 'text-blue-600 font-medium' : 'text-gray-500'"
          >
            {{ tab.name }}
            <div
              v-if="activeTab === tab.id"
              class="absolute bottom-0 left-0 w-full h-0.5 bg-blue-600"
            ></div>
          </button>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="p-6">
        <!-- 使用指南 -->
        <transition name="tab-transition">
          <div v-if="activeTab === 'guide'" class="space-y-6">
            <div class="flex items-start space-x-4">
              <div class="text-blue-600 bg-blue-100 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">
                <span class="text-sm font-bold">?</span>
              </div>
              <h2 class="text-xl font-medium text-gray-800">使用指南</h2>
            </div>

            <div class="bg-blue-50 rounded-lg p-6">
              <ul class="space-y-6">
                <li
                  v-for="(item, index) in guideItems"
                  :key="index"
                  class="flex items-start space-x-4 guide-item"
                >
                  <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">
                    <span class="text-sm font-bold">{{ index + 1 }}</span>
                  </div>
                  <div>
                    <p class="text-gray-700">{{ item }}</p>
                  </div>
                </li>
              </ul>

              <div class="flex justify-center mt-8 space-x-4">
                <el-button type="primary" @click="activeTab = 'ai'">
                  AI生成
                  <el-icon class="ml-1"><ArrowRight /></el-icon>
                </el-button>
                <el-button type="primary" @click="activeTab = 'sql'">
                  SQL生成
                  <el-icon class="ml-1"><ArrowRight /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </transition>

        <!-- AI生成 -->
        <transition name="tab-transition">
          <div v-if="activeTab === 'ai'" class="space-y-6">
            <h2 class="text-lg font-medium text-gray-700">请输入需要生成的系统功能</h2>

            <el-input
              v-model="aiInput"
              type="textarea"
              :rows="10"
              placeholder="例如：图书管理系统，包含图书信息的录入、查询、借阅和归还功能"
              maxlength="500"
              show-word-limit
              resize="none"
              class="w-full"
            />

            <div class="flex justify-center">
              <el-button
                type="primary"
                :disabled="!aiInput.trim()"
                @click="showPaymentDialog = true"
                class="w-32 transition-all duration-300"
                :class="aiInput.trim() ? 'opacity-100 hover:shadow-md' : 'opacity-50 cursor-not-allowed'"
              >
                生成代码
              </el-button>
            </div>

            <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
              <div class="flex items-start">
                <el-icon class="text-blue-600 mr-2 mt-1"><InfoFilled /></el-icon>
                <p class="text-sm text-gray-600">
                  提示：详细的功能描述有助于生成更符合需求的代码。描述系统的实体、功能和业务规则。
                </p>
              </div>
            </div>
          </div>
        </transition>

        <!-- SQL生成 -->
        <transition name="tab-transition">
          <div v-if="activeTab === 'sql'" class="space-y-6">
            <h2 class="text-lg font-medium text-gray-700">请输入SQL建表语句</h2>

            <el-input
              v-model="sqlInput"
              type="textarea"
              :rows="10"
              placeholder="请输入标准的SQL建表语句，支持MySQL等主流语法"
              class="w-full font-mono text-sm"
              resize="none"
            />

            <div class="flex justify-center">
              <el-button
                type="primary"
                :disabled="!sqlInput.trim()"
                @click="showPaymentDialog = true"
                class="w-32 transition-all duration-300"
                :class="sqlInput.trim() ? 'opacity-100 hover:shadow-md' : 'opacity-50 cursor-not-allowed'"
              >
                基于SQL生成
              </el-button>
            </div>

            <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
              <div class="flex items-start">
                <el-icon class="text-blue-600 mr-2 mt-1"><InfoFilled /></el-icon>
                <p class="text-sm text-gray-600">SQL模式提示：</p>
              </div>
              <ul class="mt-2 space-y-2 text-sm text-gray-600 pl-8 list-disc">
                <li>建议使用AI生成，SQL生成可能会有误差</li>
                <li>输入标准的SQL建表语句，支持MySQL等主流语法</li>
                <li>确保表名和字段名明确表达业务含义</li>
                <li>定义完整的主键、外键以获得更好的代码结构</li>
                <li>可以定义多个表及其关系</li>
              </ul>
            </div>
          </div>
        </transition>
      </div>
    </div>

    <!-- 支付弹窗 -->
    <el-dialog
      v-model="showPaymentDialog"
      title="费用确认"
      width="500px"
      :show-close="false"
      center
    >
      <div class="space-y-6">
        <!-- 提示信息 -->
        <div class="flex items-center space-x-3 bg-amber-50 p-4 rounded-lg">
          <div class="bg-amber-500 text-white rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0">
            <el-icon><Warning /></el-icon>
          </div>
          <p class="text-amber-800">已持续提供免费服务多月，自费创作运营艰难也的支持是我们持续的动力</p>
        </div>

        <!-- 金币兑换信息 -->
        <div class="bg-blue-50 p-4 rounded-lg space-y-3">
          <div class="flex flex-wrap gap-3">
            <div class="flex items-center bg-white px-3 py-1 rounded-full text-sm">
              <span class="text-amber-500 mr-1">👍</span>
              <span>金币兑换比例: 1元 = 100金币</span>
            </div>
            <div class="flex items-center bg-white px-3 py-1 rounded-full text-sm">
              <span class="text-amber-500 mr-1">🔄</span>
              <span>获取金币途径</span>
            </div>
            <div class="flex items-center bg-white px-3 py-1 rounded-full text-sm">
              <span class="text-blue-500 mr-1">ℹ️</span>
              <span>收费规则与特权��明</span>
            </div>
            <div class="flex items-center bg-white px-3 py-1 rounded-full text-sm">
              <span class="text-amber-500 mr-1">⭐</span>
              <span>会员特惠（仅15.9元全站免费）</span>
            </div>
          </div>
        </div>

        <!-- 生成提示 -->
        <div class="bg-green-50 p-4 rounded-lg border border-green-200">
          <div class="flex items-center">
            <span class="text-green-600 mr-2">🌟</span>
            <p class="text-green-700">生成提示: 请你描述你的功能描述</p>
          </div>
        </div>

        <!-- 专属提示 -->
        <div class="bg-purple-50 p-4 rounded-lg border border-purple-200">
          <div class="flex items-center">
            <span class="text-purple-600 mr-2">💡</span>
            <p class="text-purple-700">专属提示: 限时优惠中</p>
          </div>
        </div>

        <!-- 费用信息 -->
        <div class="space-y-2">
          <div class="flex justify-between">
            <span>当前可用余额:</span>
            <span>0</span>
          </div>
          <div class="flex justify-between">
            <span>此次消费金币:</span>
            <span class="text-red-500">- 1000</span>
          </div>
          <div class="border-t border-gray-200 my-2"></div>
          <div class="flex justify-between">
            <span>消费后余额:</span>
            <span class="text-red-500">-1000</span>
          </div>
        </div>

        <!-- 充值提示 -->
        <div class="text-center text-red-500 font-medium">
          余额不足，请先充值，可以自己输入金额
        </div>

        <!-- 充值金额 -->
        <div class="flex items-center justify-center space-x-2">
          <el-input-number v-model="paymentAmount" :min="1" :precision="0" />
          <span>元 = {{ paymentAmount * 100 }} 金币</span>
        </div>

        <!-- 支付按钮 -->
        <div class="flex justify-center">
          <el-button type="primary" class="w-full" @click="handlePayment">
            <el-icon class="mr-1"><Wallet /></el-icon>
            支付宝支付
          </el-button>
        </div>
      </div>

      <template #footer>
        <div class="flex justify-end space-x-3">
          <el-button @click="showPaymentDialog = false">取 消</el-button>
          <el-button type="primary" @click="handlePayment">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  ArrowRight,
  InfoFilled,
  Warning,
  Wallet
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 选项卡配置
const tabs = [
  { id: 'guide', name: '使用指南' },
  { id: 'ai', name: 'AI生成' },
  { id: 'sql', name: 'SQL生成' }
]

// 使用指南内容
const guideItems = [
  '本工具支持两种生成方式：功能描述生成和SQL语句生成。',
  '功能描述模式：仅支持生成完整的增删改查功能。请务必一次性给出所有系统的完整功能描述。',
  'SQL语句模式：基于SQL表结构生成系统，支持更精确的数据模型定义。',
  '需要调试/部署/二次开发等等需求帮助，可扫描右下角的二维码或者选择一对一客服咨询。'
]

// 响应式数据
const activeTab = ref('guide')
const aiInput = ref('')
const sqlInput = ref('')
const showPaymentDialog = ref(false)
const paymentAmount = ref(6)

// 处理支付
const handlePayment = () => {
  ElMessage.success('正在跳转到支付页面...')
  showPaymentDialog.value = false
}
</script>

<style scoped>
/* Tab切换动画 */
.tab-transition-enter-active,
.tab-transition-leave-active {
  transition: all 0.5s ease;
}

.tab-transition-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.tab-transition-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

/* 使用指南项目悬浮效果 */
.guide-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.guide-item:hover {
  transform: translateY(-5px) scale(1.02);
}

/* 按钮禁用状态样式 */
.el-button.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
